/*
transition-style 官网： https://www.transition.style/
transition-style 是一款基于 CSS 动画的 JavaScript 库，它可以帮助你轻松实现元素的过渡动画。
bun add transition-style
在 main.js 中引入：import 'transition-style';
使用方式：
<div transition-style="in:wipe:right"></div>
<div transition-style="out:wipe:left"></div>

在 CSS 中，`clip-path` 属性用于定义一个可见区域，仅显示这个区域的内容，而遮住其他部分。`inset()` 是 `clip-path` 的一种形状函数，
它创建一个矩形区域，可以通过指定哪个方向（顶部、右侧、底部、左侧）应当被缩进来确定可见区域的大小和形状。

clip-path: inset(top right bottom left);
- `top`：从元素的顶部到可见区域的距离。
- `right`：从元素的右侧到可见区域的距离。
- `bottom`：从元素的底部到可见区域的距离。
- `left`：从元素的左侧到可见区域的距离。

如果只提供一个值，它会同时应用到所有四个方向。如果提供两个值，第一个值会应用到顶部和底部，第二个值应用到左右。

需要特别注意，`clip-path` 属性只是影响可见区域的形状，并不影响元素的实际大小。如果需要调整元素的大小，可以使用 `transform` 属性。
*/

// 对于 transition-style 属性，我们只使用了 wipe 动画，它可以实现元素从左到右、从右到左、从上到下、从下到上、从左到右、从右到左、从上到下、从下到上等效果。
// in 代表进入/显示，out 代表离开/隐藏
// up 代表向上，down 代表向下，left 代表向左，right 代表向右
// cubic-bezier(.25, 1, .30, 1) 用于控制动画的速度，可以根据需要调整。推荐直接使用 ease-in-out。

// 从左往右展开，直至完全显示。in 代表进入/显示，out 代表离开/隐藏
@keyframes wipe-in-right {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
// 直接在元素上添加 transition-style 属性，并指定为 in:wipe:right 即可。<div transition-style="in:wipe:right"></div>
[transition-style="in:wipe:right"] {
  animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-in-right both;
}
// 从右往左收缩，直至完全隐藏。in 代表进入/显示，out 代表离开/隐藏
@keyframes wipe-out-left {
  from {
    clip-path: inset(0 0 0 0);
  }
  to {
    clip-path: inset(0 100% 0 0);
  }
}
[transition-style="out:wipe:left"] {
  animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-out-left both;
}


// 从右往左展开，直至完全显示。in 代表进入/显示，out 代表离开/隐藏
@keyframes wipe-in-left {
  from {
    clip-path: inset(0 0 0 100%);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
[transition-style="in:wipe:left"] {
  animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-in-left both;
}
// 从左往右收缩，直至完全隐藏。in 代表进入/显示，out 代表离开/隐藏
@keyframes wipe-out-right {
  from {
    clip-path: inset(0 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 100%);
  }
}
[transition-style="out:wipe:right"] {
  animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-out-right both;
}


// 从下往上展开，直至完全显示。in 代表进入/显示，out 代表离开/隐藏
@keyframes wipe-in-up {
  from {
    // 初始内容距离顶部的距离为 100%，也就是完全隐藏。高度为 0
    clip-path: inset(100% 0 0 0); // 完全隐藏，高度为 0 宽度为 100%
  }
  to {
    clip-path: inset(0 0 0 0); // 完全显示，宽高为 100% 因为距离上下左右的距离为 0，所以宽度和高度都是 100%
  }
}
[transition-style="in:wipe:up"] {
  // cubic-bezier(.25, 1, .30, 1) 用于控制动画的速度，可以根据需要调整。推荐直接使用 ease-in-out。
  animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-in-up both;
}
// 从上往下收缩，直至完全隐藏。in 代表进入/显示，out 代表离开/隐藏
@keyframes wipe-out-down {
  from {
    clip-path: inset(0 0 0 0);
  }
  to {
    clip-path: inset(100% 0 0 0);
  }
}
[transition-style="out:wipe:down"] {
  animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-out-down both;
}


// 从上往下展开，直至完全显示。in 代表进入/显示，out 代表离开/隐藏
@keyframes wipe-in-down {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
[transition-style="in:wipe:down"] {
  animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-in-down both;
}
// 从下往上收缩，直至完全隐藏。in 代表进入/显示，out 代表离开/隐藏
@keyframes wipe-out-up {
  from {
    clip-path: inset(0 0 0 0);
  }
  to {
    clip-path: inset(0 0 100% 0);
  }
}
[transition-style="out:wipe:up"] {
  animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-out-up both;
}










// 头部菜单元素显示动画
.aside-logo-enter-active {
  // animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;
  animation: wipe-in-up 0.5s ease-in-out;
}
// 元素隐藏动画
.aside-logo-leave-active {
  // ease-in-out 用于控制动画的速率，从而使动画更加平滑
  animation: wipe-out-down 0.5s ease-in-out;
}
// 从下往上折叠菜单
@keyframes wipe-in-up {
  from {
    height: 0;
  }

  to {
    height: 60px;
  }
}
// 从上往下折叠菜单
@keyframes wipe-out-down {
  from {
    height: 60px;
  }

  to {
    height: 0;
  }
}



// 从左往右扩张
@keyframes wipe-in-right {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

[transition-style="in:wipe:right"] {
  animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-in-right both;
}

/* 如下是使用示例：
  <div transition-style="in:circle:bottom-right">
    A transitioned IN element
  </div>
*/

/*
from { clip-path: inset(0 0 0 0); }：表示完全可见，没有任何缩进。
to { clip-path: inset(0 100% 0 0); }：表示从左侧开始遮盖，向右侧使用了 100% 的遮盖，这意味着元素的整个右侧是可见的，而左侧则被完全隐
*/
// 从右往左收缩
@keyframes wipe-out-left {
  from {
    clip-path: inset(0 0 0 0);  /* 完全可见 */
  }
  to {
    clip-path: inset(0 100% 0 0);  /* 完全不可见，从左向右消失 */
  }
}

[transition-style="out:wipe:left"] {
  animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-out-left both;
}

// 元素显示动画
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
// 元素隐藏动画
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}











/* fade */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.28s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.5s;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* breadcrumb transition */
.breadcrumb-enter-active {
  transition: all 0.4s;
}

.breadcrumb-leave-active {
  position: absolute;
  transition: all 0.3s;
}

.breadcrumb-enter-from,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}

/**
 * 重置 el-menu 的菜单项展开收起动画时长
 */
//.outer-most .el-collapse-transition-leave-active,
//.outer-most .el-collapse-transition-enter-active {
//  transition: 0.5s all ease-in-out !important;
//}




// el-menu 水平菜单动画，通过 collapse 属性控制
//.horizontal-collapse-transition {
//  transition: var(--pure-transition-duration) all !important;
//}

// el-menu 水平菜单动画，通过 collapse 属性控制。必须设置 !important 才能覆盖默认的 transition 样式
.horizontal-collapse-transition {
  transition: all 0.5s ease-in-out !important;
}

.horizontal-collapse-transition .el-sub-menu__title .el-sub-menu__icon-arrow {
  //transition: var(--el-transition-duration-fast);
  opacity: 0
}